<template>
  <div class="loginContainer">
      <Header></Header>
			<div class="main">
				<div class="content">
					<div class="logo">
						<img class="logoImg" src="http://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt="">
					</div>
					<div class="login">
						<div class="phoneLogin" @click="toPhoneLogin">
							<i class="iconfont icon-shouji1"></i>
							<span class="phoneText">手机号快捷登录</span>
						</div>
						<div class="emailLogin">
							<i class="iconfont icon-youjian_o"></i>
							<span class="emailText">邮箱账号登录</span>
						</div>
					</div>
				</div>
				<div class="loginType">
					<div class="wechartLogin">
						<i class="iconfont icon-weixin"></i>
						<span class="text">微信</span>
					</div>
					<div class="qqLogin">
						<i class="iconfont icon-QQ"></i>
						<span class="text">QQ</span>
					</div>
					<div class="weboLogin">
						<i class="iconfont icon-weibo"></i>
						<span class="text">微博</span>
					</div>
				</div>
			</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  methods:{
	  toPhoneLogin(){
		  	let redirect = this.$route.query.redirect
			if(redirect){
				this.$router.push('/phoneLogin?redirect=' + redirect)
			} 	
	  }
  }
}
</script>

<style lang="less" scoped>
	.loginContainer{
		.main{
			height: calc(100vh - 43.5px);
			background-color: #F2F5F4;
			position: relative;
			.content{
				width: 100%;
				height: 285px;
				.logo{
					width: 100%;
					height: 45px;
					padding-top: 80px;
					text-align: center;
					.logoImg{
						width: 134px;
						height: 45px;
					}
				}
				.login{
					width: 100%;
					height: 110px;
					padding-top: 50px;
					display: flex;
					flex-direction: column;
					align-items: center;
					.phoneLogin{
						width: 335.2px;
						height: 47px;
						margin-bottom: 16px;
						background-color: #DD1A21;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid #E7878B;
						box-sizing: border-box;
						.iconfont{
							font-size: 24px;
							color: #F4EFE9;
							margin-right: 8px;
						}
						.phoneText{
							font-size: 14px;
							color: #F4EFE9;
						}
					}
					.emailLogin{
						width: 335.2px;
						height: 47px;
						background-color: #F2F5F4;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid #E7878B;
						box-sizing: border-box;
						.iconfont{
							font-size: 24px;
							color: #DB686B;
							margin-right: 8px;
						}
						.emailText{
							font-size: 14px;
							color: #DD1A21;
						}
					}
				}
			}
			.loginType{
				width: 100%;
				height: 20px;
				position: absolute;
				bottom: 40px;
				display: flex;
				justify-content: center;
				color: #7F7F7F;
				.wechartLogin{
					width: 50.5px;
					height: 20px;
					padding: 0 20px;
					.iconfont{
						font-size: 20px;
					}
					.text{
						font-size: 14px;
					}
				}
				.qqLogin{
					width: 50.5px;
					height: 20px;
					padding: 0 20px;
					border-left: 1px solid #aaa;
					border-right: 1px solid #aaa;
					.iconfont{
						font-size: 20px;
					}
					.text{
						font-size: 14px;
					}
				}
				.weboLogin{
					width: 50.5px;
					height: 20px;
					padding: 0 20px;
					.iconfont{
						font-size: 20px;
					}
					.text{
						font-size: 14px;
					}
				}
			}
		}
	}
</style>